<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.ks{
				width: 500px;
				height: 500px;
				border: 1px solid palevioletred;
				text-decoration: none;
				outline: none;
				margin: 50px auto;
				display: block;
			}
			.ks:hover{
				border: 1px solid blueviolet;
				box-shadow: 5px 5px 10px wheat;
			}
			.ks p{
				font-size: 68px;
				text-align: center;
			}
			.dt{
			    width: 1200px;
				height: 1200px;
				display:  none;
				z-index: 1;
				position: relative;
			}
			.db img{
				width: 100%;
			}
			.db p{
				font-size: 82px;
				text-align: center;
				font-weight: bold;
				animation:mymove 1s infinite;
			}
			.db{
				width: 500px;
				height:500px;
				z-index: 10;
				position: absolute;
				top: 150px;
				left: 650px;
			}
			@keyframes mymove
				{
				from {color:red;}
				to {color:blue;}
				from {font-size:32px;}
				to {font-size:125px;}
			}
			@-webkit-keyframes mymove
			{
				from {color:red;}
				to {color:blue;}
				from {font-size:32px;}
				to {font-size:125px;}
			}
			* { margin:0; padding:0; }
			body { width:100%; height:100%; overflow:hidden; }
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	
	
	<body>
		<div class="dt">
			<div class="db">
				<img src="img/efdb42861e6d54d36942c3a28543ffd0.gif" />
				<p>花里胡哨</p>
			</div>
		<canvas  id="c" width="300" height="150">
		</canvas>  
		</div>
		
		
		<button class="ks" id="start">
			<p class="wz" id="txt">开始(惊喜!)</p>
		</button>
		
		
		
		
		
		<script type="text/javascript">
			
			// 这里是复制的
			
			window.onload = function(){
			$(document).ready(function() {
				var canvas = document.getElementById("c");
				var ctx = canvas.getContext("2d");
				var c = $("#c");
				var w,h;
				var pi = Math.PI;
				var all_attribute = {
					num:100,            			 // 个数
					start_probability:0.1,		     // 如果数量小于num，有这些几率添加一个新的     		     
					radius_min:1,   			     // 初始半径最小值
					radius_max:2,   			     // 初始半径最大值
					radius_add_min:.3,               // 半径增加最小值
					radius_add_max:.5,               // 半径增加最大值
					opacity_min:0.3,                 // 初始透明度最小值
					opacity_max:0.5, 				 // 初始透明度最大值
					opacity_prev_min:.003,            // 透明度递减值最小值
					opacity_prev_max:.005,            // 透明度递减值最大值
					light_min:40,                 // 颜色亮度最小值
					light_max:70,                 // 颜色亮度最大值
				};
				var style_color = find_random(0,360);  
				var all_element =[];
				window_resize();
				function start(){
					window.requestAnimationFrame(start);
					style_color+=.1;
					ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
					ctx.fillRect(0, 0, w, h);
					if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){
						all_element.push(new ready_run);
					}
					all_element.map(function(line) {
						line.to_step();
					})
				}
				function ready_run(){
					this.to_reset();
				}
				ready_run.prototype = {
					to_reset:function(){
						var t = this;
						t.x = find_random(0,w);
						t.y = find_random(0,h);
						t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);
						t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);
						t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);
						t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);
						t.light = find_random(all_attribute.light_min,all_attribute.light_max);
						t.color = 'hsl('+style_color+',100%,'+t.light+'%)';
					},
					to_step:function(){
						var t = this;
						t.opacity -= t.opacity_change;
						t.radius += t.radius_change;
						if(t.opacity <= 0){
							t.to_reset();
							return false;
						}
						ctx.fillStyle = t.color;
						ctx.globalAlpha = t.opacity;
						ctx.beginPath();
						ctx.arc(t.x,t.y,t.radius,0,2*pi,true);
						ctx.closePath();
						ctx.fill();
						ctx.globalAlpha = 1;
					}
				}
				function window_resize(){
					w = window.innerWidth;
					h = window.innerHeight;
					canvas.width = w;
					canvas.height = h;
				}
				$(window).resize(function(){
					window_resize();
				});
				function find_random(num_one,num_two){
					return Math.random()*(num_two-num_one)+num_one;
				}
				(function() {
					var lastTime = 0;
					var vendors = ['webkit', 'moz'];
					for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
						window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
						window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
													  window[vendors[xx] + 'CancelRequestAnimationFrame'];
					}
				
					if (!window.requestAnimationFrame) {
						window.requestAnimationFrame = function(callback, element) {
							var currTime = new Date().getTime();
							var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
							var id = window.setTimeout(function() {
								callback(currTime + timeToCall);
							}, timeToCall);
							lastTime = currTime + timeToCall;
							return id;
						};
					}
					if (!window.cancelAnimationFrame) {
						window.cancelAnimationFrame = function(id) {
							clearTimeout(id);
						};
					}
				}());
				start();
			});
			
			
			
			
			
			// 自己写的
				var St = document.getElementById("start");
				var oEd = document.getElementById("end");
				var Tt = document.getElementById("txt");
				var oDiv = document.getElementsByClassName("dt")[0];
				var kkpll =  3;
				var kkpt = null;
				
				St.onclick = function(){
					//setInterval 每隔多少秒，执行一次（执行多次）
					//setTimeout  隔多少秒后执行（只执行一次）
					
				
				kkpt = setInterval(function(){
					if(kkpll == 0){
						oDiv.style.display = "block";
					}else if(kkpll > 0){
					Tt.innerHTML = kkpll;
					kkpll--;
					}
					},1000);
				}
				
				
				
				
			}
			
			
			
			
			
			
			</script>
	</body>
</html>
